<extend name="_Layout/main"/>

<block name="style">

</block>

<block name="main">
        <div class="row">

    <style type="text/css">
        .hentry {
            margin-bottom: 20px;
            border-radius: 3px;
            background: #fff;
            box-shadow: 0 2px 3px rgba(0,0,0,.1);
            clear: both;
            height: 340px;
        }
        @media only screen and (max-width: 540px) {
            .hentry {
            width: auto;
            margin-left: auto;
            margin-right: auto;
            float: none;
            height: auto;}
        }
		.hide{
			display:none;
		}
        .widget_music_post_widget {
            
        }
        .list-page-header{
            text-align: right;
            padding-top: 5px;
            padding-right: 10px;
        }
        .list-page-title{
            margin: 0 0 20px;
            padding: .3em .5em;
            border-radius: 3px;
            background: #2C3942;
            color: #fff;
            font-weight: 400;
            font-size: 24px;
            display: inline-block;
        }
        .list-page-title:hover{
            background: #767676;
        }
        .item-overlay.active,.item:hover .item-overlay {
          display: block;
          margin-bottom:8px;
        }
        .list-page-header{
            text-align: right;
            padding-top: 5px;
            padding-right: 10px;
        }
        .list-page-title{
            margin: 0 0 20px;
            padding: .3em .5em;
            border-radius: 3px;
            background: #2C3942;
            color: #fff;
            font-weight: 400;
            font-size: 24px;
            display: inline-block;
        }
        .list-page-title:hover{
            background: #767676;
        }
		
		
    </style>
    <!-- gallery 画廊引入 Start -->
    <link rel='stylesheet' href='Application/Home/View/Music/_Resource/gallery/css/style.css' type='text/css' media='screen' />
  	<link rel="stylesheet" href="Application/Home/View/Music/_Resource/gallery/css/baguetteBox.min.css" type='text/css' media='screen' />
    
    <!-- gallery 画廊引入 End -->
    
                <!-- 文档列表页面顶部钩子 -->
                <div class="clearfix hook hook-document-list-before">
                    {:hook('DocumentListBefore')}
                </div>
                <!-- 文档列表 -->
                <div class="widget widget_music_post_widget">
                    <header class="list-page-header">
                        <a href="{:U('Document/add', array('cid' => $__CURRENT_CATEGORY__))}">
                            <h2 class="font-thin m-b m-t-none" style="float:left;">What's Photos</h2>
                            <h1 class="list-page-title">发布图片</h1>
                        </a>
                    </header>
					<div id="container">
                    <div id="wrapper" class="baguetteBox">
					  <div id="containers">
						<volist name="volist" id="vo">
							<php>$covers_list=explode(',',$vo['covers']);</php>
							<volist name="covers_list" id="imgid">
							<div class="grid">
							  <a href="{$imgid|get_cover='Music'}"><img class="lazy" src="Application/Home/View/Music/_Resource/gallery/css/pixel.gif" data-original="{$imgid|get_cover='Music'}" width="250" /></a>
							</div>
							</volist>
						</volist>
					  </div>
					</div>
					</div>
                       
                            <!-- Once the page is loaded, initalize the plug-in. -->
		  <script>
			$.getScript("Application/Home/View/Music/_Resource/gallery/js/jquery.lazyload.min.js",function(){
			$.getScript("Application/Home/View/Music/_Resource/gallery/js/blocksit.min.js",function(){
			$.getScript("Application/Home/View/Music/_Resource/gallery/js/baguetteBox.min.js",function(){
				$(function(){
						baguetteBox.run('.baguetteBox');
					});
				
				
				//判断显示器大小
					var currentWidth = 1900;
					var col;	//显示列数
					var winWidth = $(window).width();
						var conWidth;
						if(winWidth < 660) {
							conWidth = 660;
							col = 2;
						} else if(winWidth < 880) {
							conWidth = 660;
							col = 3;
						} else if(winWidth < 1100) {
							conWidth = 880;
							col = 4;
						} else if(winWidth < 1500) {
							conWidth = 1200;
							col = 5;
						} else {
							conWidth = 1900;
							col = 6;
						}
					
				//初始值
				$(function(){
					$("img.lazy").lazyload({	
						load:function(){
							$('#containers').BlocksIt({
								numOfCol: col,
								offsetX: 8,
								offsetY: 8
							});
						}
					});	
					$('#vbox').scroll(function(){
							// 当滚动到最底部以上50像素时， 加载新内容
						if ($(document).height() - $(this).scrollTop() - $(this).height()<50){
							$('#containers').append($("#test").html());		
							$('#containers').BlocksIt({
								numOfCol:col,
								offsetX: 8,
								offsetY: 8
							});
							$("img.lazy").lazyload();
						}
					});
					
					//window resize
					var currentWidth = 1100;
					$(window).resize(function() {
						var winWidth = $(window).width();
						var conWidth;
						if(winWidth < 660) {
							conWidth = 440;
							col = 2;
						} else if(winWidth < 880) {
							conWidth = 660;
							col = 3;
						} else if(winWidth < 1100) {
							conWidth = 880;
							col = 4;
						} else if(winWidth < 1500) {
							conWidth = 1200;
							col = 5;
						} else {
							conWidth = 1900;
							col = 6;
						}
						
						if(conWidth != currentWidth) {
							currentWidth = conWidth;
							$('#containers').width(conWidth);
							$('#containers').BlocksIt({
								numOfCol: col,
								offsetX: 8,
								offsetY: 8
							});
						}
					});
				});
			});});});
			//页面加载完成后，自动强制刷新一次，为了使JS生效
			/*function fresh(){  
				if(location.href.indexOf("?reload=true")<0)
				   {
					location.href+="?reload=true";  
				   }  
			}  
			setTimeout("fresh()",50)*/
		  </script>

                            <!-- 代码 结束 -->


                </div>
                <ul class="pagination">{$page}</ul>

                <!-- 文档列表页面底部钩子 -->
                <div class="clearfix hook hook-document-list-after">
                    {:hook('DocumentListAfter')}
                </div>
           
            
        </div>
</block>
